﻿@{
    ViewBag.Title = "Index";
}

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-2.1.0.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.js")"></script>
    <script src="@Url.Content("~/Widget/Timeline.js")" type="text/javascript"></script>
</head>
<body>
    <h2>Index</h2>

    <div id="timelineYear">
        @*Time line year content*@
    </div>
    <div id="timelineMonth" class="customTimeLineMargin">
        @*Time line Month content*@
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#timelineYear').timeline({
                name: "year",
                onselect: function (id) {
                    //console.log($('#yearinner>.selected').html());
                    $('#yearinner>.selected').removeClass('selected');
                    $('#' + id).addClass('selected');
                    $('#timelineMonth').css('visibility', 'visible');
                },
                onunselect: function (id) {
                    $('.selected').removeClass('selected');
                    $('#timelineMonth').css('visibility', 'hidden');
                    $('#content').remove();
                }
            });

            $('#timelineMonth').timeline({
                type: "month",
                name: "month",
                onselect: function (id) {
                    $('#monthinner>.selected').removeClass('selected');
                    $('#' + id).addClass('selected');
                },
                onunselect: function (id) {
                    $('#monthinner>.selected').removeClass('selected');
                    $('#content').remove();
                }
            });
        });
    </script>
</body>

